Version 1.0 of the skinning engine only supported bitmap formats (*.bmp – monochrome, 8, 16 or 24 bits per pixel). In order to support transparency with an alpha channel (for smooth transparency effects), an image is thus defined by two files in the skinning language: the image (my_image.bmp) and its transparency mask (my_image_mask.bmp). The first file contains the image we want to display but without transparency information (the bmp format does not support transparency). The second file contains the alpha channel of the transparent image.
Since version 1.7, the engine also supports png files that can contain transparency information. If no additional mask is specified, the engine selects the transparency layer that is inside the png file for display and mouse masks. You can override these using mask files just like for bmp files.
Here is an example:
|
|
|
|
|---|---|---|
| sample.bmp | sample_mask.bmp | result on a white background |
A third file can be used in order to define the 'active' zone of the image: this is the zone of the image where the mouse is detected for clicks and movements. If we want the mouse to be active only on the round part of the knob in the previous example, we can add a sample_mouse_mask.bmp file which defines where the mouse is active:
Remark: if this file does not exist, the system will choose by default the mask file. If you want the entire rectangle of the widget to be active, just set the image_mouse_mask attribute to “” (empty string).
The skinning language relies on default naming convention to find the mask and mouse_mask files so that the designer does not have to write all attributes related to the images (it makes a lot of attributes otherwise!).
The first convention is that mask and mouse mask images are suffixed with _mask and _mouse_mask. If the _mouse_mask file has not been found, the _mask file is used: for example, if the image attribute is set to 'my_img.bmp', the system will look for 'my_img_mask.bmp' and 'my_img_mouse_mask.bmp'. If you want to use a different file for these, just set the 'image_mask' and 'image_mouse_mask' attributes to another file name (can be an empty string if no file is to be used). The second convention is that if the mouse_mask cannot be found, the mask file will be used for the mouse mask.
The same convention is recursively applied to other attributes for widgets that require multiple images. For example, for an IMAGE_PARAM_KNOB that requires image and image_hover attributes, the resolution of files for image_hover is done the following way:
if the “image_hover” attribute is set, use the file name.
else look for a file which name corresponds to “image” attribute suffixed with “hover”.
if not found, use the same file as for “image”
For the mask and mouse_mask, it works the same way. That means that you can use the same mask and mouse_mask file for all your widget states if they have the same shape. It avoids you to use copies of the same image and waste memory and disk space and also avoids you to have to fill all the attributes.